<!-- 手机号登录 -->
<template>
	<view class="phone-login">
		<image class="logo" :src="images.logo"></image>
		<text class="title">欢迎使用DD友伴</text>

		<view class="form">
			<view class="form-title">登录</view>

			<view class="input user">
				<uni-icons type="person" size="30rpx"></uni-icons>
				<input type="text" placeholder="请输入手机号" v-model="formData.phone" />
			</view>

			<view class="input password">
				<uni-icons type="locked" size="30rpx"></uni-icons>
				<input type="number" placeholder="请输入验证码" v-model="formData.phoneCode"  />
				<button type="primary" @click="getCode">{{buttomText}}</button>
			</view>

<!-- 			<view class="submit" @click="submit">
				登录
			</view> -->
			<button open-type="liveActivity" class="submit" @click="submit" @createliveactivity="getSubscriptionMsg">登录</button>

		</view>



	</view>
</template>

<script>
	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	
	// 引入图片
	import imgs from '@/static/images/index.js'

	// api引入
	import {
		setAuthPhoneLoginApi, // 手机号登录
	} from '@/api/user.js'
	import {
		getAuthCreateCodeApi, // 发送验证码
	} from '@/api/activity.js'
	
	// 公共方法
	import text from '@/utils/test.js'
	import cookie from '@/utils/cookie.js'


	export default {
		props: {
			/**
			 * 订阅消息
			 */
			getRequestMsg:{
				type: Function,
				default: ()=>{}
			},

			/**
			 * 是否勾选同意协议
			 */
			agreement: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				images: {}, // 图片组

				buttomText: '获取验证码', // 发送短信验证码按钮的文字
				disabled: false, // 是否已经获取验证码
				
				value: '',
				formData: {
					phone: '', // 电话
					phoneCode: '', // 验证码
				}

			};
		},
		created() {
			this.images = {
				...imgs
			}
		},
		methods: {
			...mapMutations(['setUserInfo']),
			
			/**
			 * 输入手机
			 */
			setPhone(e){
				console.log();
			},
			
			
			/**
			 * 获取验证码
			 */
			async getCode() {
				// 正则验证电话
				if (!text.mobile(this.formData.phone)) {
					return this.$public.showText('请输入正确的电话号码')
				} else {
			
					// 设置验证码点击样式
					this.setCodeStyle(30)
			
					// 发送短信
					this.getAuthCreateCode(this.formData.phone)
				}
			},

			/**
			 * 发送验证码
			 */
			async getAuthCreateCode(val) {
				const res = await getAuthCreateCodeApi(val)
				if (res.code !== 200) {
					this.$public.showText(res.msg || '发送失败')
					return
				}
				this.$public.showText('发送成功')
			},

			/**
			 * 设置获取验证码点击样式
			 */
			setCodeStyle(val) {
				this.disabled = true
				let that = this

				let num = val
				this.buttomText = num + 's获取'
				let timeOut = setInterval(() => {
					num--
					that.buttomText = num + 's获取'
				}, 1000)


				setTimeout(() => {
					clearInterval(timeOut)
					that.buttomText = '重新获取'
					this.disabled = false
				}, val * 1000)
			},
			
			/**
			 * 手机号登录
			 */
			async setAuthPhoneLogin(){
				// 调起订阅通知
				this.$emit('getRequestMsg')
				
				const res = await setAuthPhoneLoginApi(this.formData)
				if(res.code !== 200){
					this.$public.showText(res.msg || '登录失败')
					return
				}
				
				
				// 返回错误,如果是701和702就去填信息
				if (res.code !== 200) {
					if (Math.floor(res.code / 100) === 7) {
						uni.redirectTo({
							url: '/pages/me/followWebsite/followWebsite?type=' + loginValue.code
						});
					}
					return
				}
				
				console.log(res, '登录成功');
				
				
				// 是否艺人，有电话,userArtistVo也不为空就是
				if (this.$public.getValueStatus(res.data) && this.$public.getValueStatus(res.data.phone) && res
					.data.userArtistVo !== null) {
					// 用户参数
					this.setUserInfo(res.data)
					cookie.set('token', res.data?.loginToken || '')
							
							
					// 如果有电话就运行
					uni.switchTab({
						url: '/pages/homeTab/index'
					});
				} else {
					uni.redirectTo({
						url: '/pages/me/followWebsite/followWebsite'
					});
				}
				
			},



			/**
			 * 登录
			 */
			submit() {
				// 先判断勾选协议了没
				if (!this.agreement) {
					this.$public.showText('请先阅读并同意用户协议和隐私协议')
					return
				}
				if(this.formData.phoneCode === ''){
					this.$public.showText('请输入验证码')
					return
				}
				
				// 登录
				this.setAuthPhoneLogin()
				
				
				
			},
			
			/**
			 * 点击获取订阅
			 */
			getSubscriptionMsg(e){
				console.log(e, 'mmmmmmm');
			},

		}
	}
</script>

<style lang="less" scoped>
	.phone-login {
		#flex(column, -, center);
		#padding(0 24rpx);

		.logo {
			#box(200rpx);
			margin: 100rpx 0 24rpx 0;
		}

		.title {
			#font(40rpx, #333, bold);
			margin-bottom: 48rpx;
		}

		.form {
			#box(100%, -, 24rpx, #fff);
			#padding(24rpx);

			.form-title {
				#font(32rpx, #333, 600);
				margin-bottom: 36rpx;
			}

			.input {
				#box(-, 88rpx, 12rpx);
				#flex(-, -, center);
				#padding(0 24rpx);
				margin-bottom: 24rpx;
				border: 2rpx solid #eee;

				input {
					height: 88rpx;
					#font(28rpx, #999);
					margin-left: 12rpx;
					min-width: 70%;
				}

				button {
					#font(22rpx, #fff);
					#padding(18rpx 12rpx);
				}
			}


			.submit {
				#box(100%, 88rpx, 100rpx, linear-gradient(180deg, #E27C8A 0%, #EC606F 100%));
				#flex(-, center, center);
				#font(36rpx, #fff);
			}


		}
	}
</style>